<template>
    <div class="app">
        <nav class="sidebar2">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </nav>

        <!-- 侧边信息栏 -->
        <el-drawer
            :visible.sync="drawer"
            :title="currentInfo.title"
            :direction="direction"
            size="30%">
            <div class="drawer-content">
                <h3>{{ currentInfo.title }}</h3>
                <div class="info-content" v-html="currentInfo.content"></div>
            </div>
        </el-drawer>

        <div @click="openAnnouncement" style="cursor: pointer;">
    <el-card class="box-card">
        <el-tag>{{ announList.title }}</el-tag>
        <div class="text item">
            {{ announList.content }}
        </div>
    </el-card>
</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            drawer: false,
            direction: 'rtl',
            currentInfo: {
                title: '',
                content: ''
            },
            data: [
                {
                    label: '服务指南',
                    children: [
                        { 
                            label: '购物流程',
                            content: `
                                <div class="guide-content">
                                    <h4>购物流程说明</h4>
                                    <p>1. 浏览商品：选择您喜欢的花种或园艺工具</p>
                                    <p>2. 加入购物车：点击"加入购物车"按钮</p>
                                    <p>3. 确认订单：核对商品信息和收货地址</p>
                                    <p>4. 选择支付：支持多种支付方式</p>
                                    <p>5. 等待收货：我们会尽快为您发货</p>
                                </div>
                            `
                        },
                        { 
                            label: '会员介绍',
                            content: `
                                <div class="guide-content">
                                    <h4>会员等级及权益</h4>
                                    <p>普通会员：</p>
                                    <ul>
                                        <li>购物积分奖励</li>
                                        <li>生日特别优惠</li>
                                    </ul>
                                    <p>黄金会员：</p>
                                    <ul>
                                        <li>专属优惠券</li>
                                        <li>免费花艺课程</li>
                                        <li>优先购买新品</li>
                                    </ul>
                                </div>
                            `
                        },
                        { 
                            label: '常见问题',
                            content: `
                                <div class="guide-content">
                                    <h4>常见问题解答</h4>
                                    <p>Q：花种如何保存？</p>
                                    <p>A：建议将花种存放在阴凉干燥处，避免阳光直射。</p>
                                    <p>Q：种子发芽时间？</p>
                                    <p>A：不同花种发芽时间不同，一般在7-15天。</p>
                                    <p>Q：如何退换货？</p>
                                    <p>A：未使用的商品7天内可申请退换。</p>
                                </div>
                            `
                        },
                    ]
                },
                {
                    label: '特色服务',
                    children: [
                        { 
                            label: '花种介绍',
                            content: `
                                <div class="guide-content">
                                    <h4>花种品类</h4>
                                    <p>1. 四季花种</p>
                                    <ul>
                                        <li>春季：牡丹、郁金香、玫瑰</li>
                                        <li>夏季：向日葵、百合、茉莉</li>
                                        <li>秋季：菊花、桂花、波斯菊</li>
                                        <li>冬季：水仙、梅花、山茶花</li>
                                    </ul>
                                    <p>2. 室内观赏花种</p>
                                    <p>3. 阳台种植花种</p>
                                </div>
                            `
                        },
                        { 
                            label: '工具介绍',
                            content: `
                                <div class="guide-content">
                                    <h4>园艺工具</h4>
                                    <p>基础工具：</p>
                                    <ul>
                                        <li>铲子：适合挖土、移栽</li>
                                        <li>剪刀：修剪枝叶用</li>
                                        <li>喷壶：浇水施肥</li>
                                    </ul>
                                    <p>进阶工具：</p>
                                    <ul>
                                        <li>营养土检测仪</li>
                                        <li>自动浇水系统</li>
                                    </ul>
                                </div>
                            `
                        },
                        { 
                            label: '知识普及',
                            content: `
                                <div class="guide-content">
                                    <h4>养花知识</h4>
                                    <p>1. 基础养护</p>
                                    <ul>
                                        <li>浇水要求</li>
                                        <li>光照需求</li>
                                        <li>施肥技巧</li>
                                    </ul>
                                    <p>2. 病虫害防治</p>
                                    <p>3. 花期管理</p>
                                </div>
                            `
                        },
                    ]
                },
                {
                    label: '帮助中心',
                    children: [
                        { 
                            label: '客户端',
                            content: `
                                <div class="guide-content">
                                    <h4>客户端使用指南</h4>
                                    <p>1. APP下载方式</p>
                                    <p>2. 功能介绍</p>
                                    <p>3. 常见问题解决</p>
                                </div>
                            `
                        },
                        {
                            label: '联系客服',
                            children: [
                                { 
                                    label: '在线联系',
                                    content: `
                                        <div class="guide-content">
                                            <h4>在线客服</h4>
                                            <p>服务时间：9:00-22:00</p>
                                            <p>在线客服QQ：XXXXXXXXX</p>
                                            <p>微信客服：XXXXXXXX</p>
                                        </div>
                                    `
                                },
                                { 
                                    label: '联系电话',
                                    content: `
                                        <div class="guide-content">
                                            <h4>客服热线</h4>
                                            <p>服务时间：9:00-18:00</p>
                                            <p>客服电话：400-XXX-XXXX</p>
                                            <p>投诉电话：400-XXX-XXXX</p>
                                        </div>
                                    `
                                },
                            ]
                        }
                    ]
                },
                {
                    label: '支付方式',
                    children: [
                        { 
                            label: '货到付款',
                            content: `
                                <div class="guide-content">
                                    <h4>货到付款说明</h4>
                                    <p>支持区域：全国大部分地区</p>
                                    <p>支付方式：现金、刷卡</p>
                                    <p>注意事项：请在收货时当面验货</p>
                                </div>
                            `
                        },
                        { 
                            label: '在线支付',
                            content: `
                                <div class="guide-content">
                                    <h4>在线支付方式</h4>
                                    <p>1. 支付宝</p>
                                    <p>2. 微信支付</p>
                                    <p>3. 银联在线</p>
                                    <p>4. 信用卡支付</p>
                                </div>
                            `
                        },
                        { 
                            label: '邮局汇款',
                            content: `
                                <div class="guide-content">
                                    <h4>邮局汇款信息</h4>
                                    <p>收款人：XXXX花卉园艺</p>
                                    <p>地址：XXXXXXXXXX</p>
                                    <p>邮编：XXXXXX</p>
                                </div>
                            `
                        },
                    ]
                },
                {
                    label: '配送方式',
                    children: [
                        { 
                            label: '快递配送',
                            content: `
                                <div class="guide-content">
                                    <h4>快递配送说明</h4>
                                    <p>合作快递：顺丰、EMS、圆通等</p>
                                    <p>配送时效：1-3天到货</p>
                                    <p>运费说明：单笔订单满99元免运费</p>
                                </div>
                            `
                        },
                        { 
                            label: '上门自提',
                            content: `
                                <div class="guide-content">
                                    <h4>自提服务</h4>
                                    <p>自提地点：各门店均可自提</p>
                                    <p>自提时间：10:00-20:00</p>
                                    <p>所需证件：订单号、有效证件</p>
                                </div>
                            `
                        },
                        { 
                            label: '特殊配送',
                            content: `
                                <div class="guide-content">
                                    <h4>特殊配送服务</h4>
                                    <p>1. 指定时间配送</p>
                                    <p>2. 加急配送</p>
                                    <p>3. 生鲜冷链配送</p>
                                </div>
                            `
                        },
                    ]
                },
                {
                    label: '售后服务',
                    children: [
                        { 
                            label: '售后政策',
                            content: `
                                <div class="guide-content">
                                    <h4>售后服务政策</h4>
                                    <p>1. 7天无理由退换</p>
                                    <p>2. 15天质量问题包退换</p>
                                    <p>3. 365天免费技术指导</p>
                                </div>
                            `
                        },
                        { 
                            label: '价格保护',
                            content: `
                                <div class="guide-content">
                                    <h4>价格保护政策</h4>
                                    <p>购买后7天内降价</p>
                                    <p>可申请退还差价</p>
                                    <p>仅限正价商品</p>
                                </div>
                            `
                        },
                        { 
                            label: '退款说明',
                            content: `
                                <div class="guide-content">
                                    <h4>退款流程</h4>
                                    <p>1. 提交退款申请</p>
                                    <p>2. 寄回商品</p>
                                    <p>3. 确认收货并验货</p>
                                    <p>4. 退款到账</p>
                                </div>
                            `
                        },
                        { 
                            label: '取消订单',
                            content: `
                                <div class="guide-content">
                                    <h4>订单取消说明</h4>
                                    <p>未付款订单：随时可取消</p>
                                    <p>已付款订单：</p>
                                    <ul>
                                        <li>未发货：可申请取消</li>
                                        <li>已发货：需要等待收货后退货</li>
                                    </ul>
                                </div>
                            `
                        },
                    ]
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            announList: {
                title: '',
                content: ''
            }
        };
    },
    created() {
    this.getannounList();
  },
    methods: {
        handleNodeClick(data) {
            if (data.content) {
                this.currentInfo = {
                    title: data.label,
                    content: data.content
                };
                this.drawer = true;
            }
        },
        openAnnouncement() {
        const h = this.$createElement;
        this.$notify({
          title: this.announList.title,
          message: h('i', { style: 'color: teal'}, this.announList.content)
        });
      },
      getannounList() {
            this.request.get('/announcements')
                .then(response => {
                    this.announList = response.data[0]
                })
                .catch(error => {
                    console.error('Failed to fetch announcements list:', error);
                });
        },
    }
};
</script>

<style scoped>
.text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.item {
    padding: 12px 0;
}

.box-card {
    width: 200px;
    background-color: white;
    padding: 15px;
    margin-top: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.box-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.box-card .el-tag {
    margin-bottom: 10px;
    font-weight: 500;
    padding: 6px 12px;
}

.sidebar2 {
    background-color: white;
    width: 200px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.drawer-content {
    padding: 20px;
}

.drawer-content h3 {
    color: #303133;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBEEF5;
}

.info-content {
    color: #606266;
    line-height: 1.8;
}

.guide-content {
    padding: 10px;
}

.guide-content h4 {
    color: #303133;
    margin-bottom: 15px;
}

.guide-content p {
    margin: 10px 0;
    color: #606266;
}

.guide-content ul {
    padding-left: 20px;
    margin: 10px 0;
}

.guide-content li {
    margin: 5px 0;
    color: #606266;
}

/* 自定义 Element UI 树形控件样式 */
.sidebar2 :deep(.el-tree) {
    background: transparent;
}

.sidebar2 :deep(.el-tree-node__content) {
    height: 40px;
    border-radius: 8px;
    margin: 4px 0;
    transition: all 0.3s ease;
}

.sidebar2 :deep(.el-tree-node__content:hover) {
    background-color: #f0f9ff;
}

.sidebar2 :deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #e6f3fc;
    color: #3DA9F2;
}

.sidebar2 :deep(.el-tree-node__expand-icon) {
    color: #666;
}

.sidebar2 :deep(.el-tree-node__label) {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.sidebar2 :deep(.el-tree-node__expand-icon.expanded) {
    color: #3DA9F2;
    transform: rotate(90deg);
}

.sidebar2 :deep(.el-tree-node__expand-icon.expanded.is-leaf) {
    color: transparent;
}
</style>